<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/index.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
    </head>
    <body>

        <div id="app">
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-row :gutter="0" type="flex" class="row-bg" justify="center">
                        <el-col :span="12">
                            <el-input v-model="todo" placeholder="请输入内容" v-on:keyup.enter.native="addTodo"> </el-input>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary" v-on:click="addTodo">添加</el-button>
                        </el-col>
                    </el-row>

                </el-header>
                <el-main>
                    <el-row :gutter="0" type="flex" class="row-bg" justify="center">
                        <el-col :span="14">
                            <el-table :data="todolist" :row-class-name="addClass" @row-click="rowClick">
                                <el-table-column prop="todo" label="任务列表">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.done">{{scope.row.todo}}(完成)</span>
                                        <span v-else>{{scope.row.todo}}</span>
                                        <span class="close" v-on:click.stop="deleteTodo(scope.$index)">&#x00D7;</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>

                    </el-row>
                </el-main>
            </el-container>
        </div>
    </body>


    <style type="text/css">
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        .finished {
            background: #BBB;
            text-decoration: line-through;
        }

        .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px 12px 16px
        }

        .close:hover {
            background-color: #f44336;
            color: white;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        var main = new Vue({

            el: "#app",
            data: {
                todo: "",
                todolist: []
            },


            created() {
                axios.get("http://127.0.0.1:5000/todos")
                    .then(function(response) {
                        console.log(response.data);
                        main.todolist = response.data;
                    })
                    .catch(function(error) {
                        console.log(error);
                    });



            },
            methods: {
                
                addTodo: function() {
                    // TODO:判断是否为空。
                    console.log(this);
                    if (!this.todo) {
                        this.warning();
                    } else {


                        axios({
                                method: 'post',
                                url: 'http://127.0.0.1:5000/todos',
                                data: {
                                    todo: main.todo,
                                    done: false,
                                },
                                header: {
                                    'Content-Type': 'application/json'
                                }
                            })
                            .then(function(response) {
                                console.log(response.data);
                                main.todolist.push({
                                    todo: main.todo,
                                    done: false
                                });
                                main.todo = "";
                            })
                            .catch(function(error) {
                                console.log(error);
                            });;



                    }




                },
                rowClick(row) {
                    row.done = !row.done;
                    console.log(row.todo, row.done);

                },
                addClass(table) {
                    if (table.row.done) {
                        return "finished";
                    }
                },
                deleteTodo(index) {
                    this.todolist.splice(index, 1);
                },
                warning() {
                    this.$message({
                        message: '不能为空！',
                        type: 'warning',
                        duration: 600
                    });
                },
            }

        });
    </script>

</html>
